<template>
  <div class="m-view-tx">
    <h2>{{$t('home.txTitle')}}</h2>
    <div class="tx-area table-shadow">
      <div class="tx-item" v-for="(item,index) in txList" :key="index">
        <div class="line flex-left">
          <p>
            {{$t('home.txHash')}}：
            <router-link
              :to="{path:'/tradeHash',query:{hash:item.hash}}"
              class="light hash txhash"
            >{{item.hash|filterHash(6)}}</router-link>
          </p>
          <p class="grey">
            <count :time="item.block_time"></count>
          </p>
        </div>
        <div class="line flex-left">
          <p>
            {{$t('home.sender')}}：
            <router-link
              :to="{path:'/address',query:{address:item.from}}"
              class="light hash"
            >{{item.from|filterHash(6)}}</router-link>
          </p>
          <p>
            {{$t('home.receiver')}}：
            <router-link
              :to="{path:'/address',query:{address:item.to}}"
              class="light hash"
            >{{item.to|filterHash(6)}}</router-link>
          </p>
        </div>
        <div class="line flex-left">
          <p>
            <span class="grey tx-val">{{$t('home.txValue')}}</span>
            {{item|TradeValue}}
          </p>
        </div>
      </div>
      <div class="viewall-btn">
        <router-link to="/tradelist">{{$t('home.viewAll')}}</router-link>
      </div>
    </div>
  </div>
</template>
<script>
import txBase from "@/mixins/Home/txList.js";
import Count from "@/components/Count.vue";
export default {
  mixins: [txBase],
  components: {
    Count
  }
};
</script>

<style lang="scss" scoped>
.m-view-tx {
  h2 {
    margin: 30px 0 20px 12px;
    font-size: 14px;
    font-family: PingFangSC-Semibold;
    font-weight: 500;
    color: $black;
    line-height: 20px;
  }
  .tx-area {
    background: $white;
    margin-bottom: 30px;
    .tx-item {
      min-height: 100px;
      padding: 15px 20px;
      border-bottom: 1px solid $border;
      color: $black;
      p:nth-of-type(1) {
        min-width: 50%;
      }
      p {
        line-height: 25px;
      }
      .tx-val {
        margin-right: 10px;
      }
      .txhash {
        margin-right: 10px;
      }
    }
    .grey {
      color: $grey;
    }
  }
  .viewall-btn {
    font-size: 12px;
    // font-family: PingFangSC-Semibold;
    height: 54px;
    padding: 12px;
    a {
      display: inline-block;
      width: 100%;
      height: 100%;
      line-height: 30px;
      text-align: center;
      // color: $orange;
      color: #3498db;
      background: rgba(52, 152, 219, 0.1);
      border-radius: 4px;
      transition: 0.3s;
    }
    a:hover {
      color: #fff;
      background: #3498db;
      box-shadow: 0 0 20px rgba(52, 152, 219, 0.2);
    }
  }
}
</style>